<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宿舍成员介绍</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav>
        <div class="logo1">
            <img src="tupian/为人民服务.jpg" alt="宿舍 logo" class="logo-img">
        </div>
        <div class="logo">我们的宿舍</div>
        <ul>
            <li><a href="index.html">首页</a></li>
            <li><a href="宿舍成员.html">宿舍成员</a></li>
            <li><a href="宿舍故事.html">宿舍故事</a></li>
            <li><a href="关于我们.html">关于我们</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

    <!-- 首页 Banner -->
    <header>
        <h1>欢迎来到我们的宿舍！</h1>
        <p>一个充满温暖与欢笑的小家</p>
    </header>

<!-- 特色介绍区块 -->
<section class="features">
    <div class="container">
        <h2>我们的特色</h2>
        <div class="feature-grid">
            <div class="feature-card">
                <h3>🏆 荣誉宿舍</h3>
                <p>连续3年获得校级"文明宿舍"称号</p>
            </div>
            <div class="feature-card">
                <h3>📚 学习空间</h3>
                <p>配备独立自习区与共享书柜</p>
            </div>
            <div class="feature-card">
                <h3>🎉 丰富活动</h3>
                <p>每月举办生日会、读书分享会</p>
            </div>
        </div>
    </div>
</section>

<!-- 成员预览 -->
<section class="home-members">
    <div class="container">
        <h2>遇见我们</h2>
        <div class="member-preview">
            <div class="preview-card">
                <img src="tupian/member1.jpg" alt="舍长">
                <h4>李明轩</h4>
                <p>"保持热爱，奔赴山海"</p>
            </div>
            <div class="preview-card">
                <img src="tupian/member2.jpg" alt="技术担当">
                <h4>王思远</h4>
                <p>"代码改变世界"</p>
            </div>
            <!-- 更多成员... -->
        </div>
        <a href="宿舍成员.html" class="cta-button">认识全体成员 →</a>
    </div>
</section>

<!-- 照片墙 -->
<section class="gallery">
    <h2>生活瞬间</h2>
    <div class="photo-wall">
        <img src="tupian/g1.jpg" alt="生日派对">
        <img src="tupian/g2.jpg" alt="学习时刻">
        <img src="tupian/g3.jpg" alt="宿舍装饰">
        <img src="tupian/g4.jpg" alt="团队活动">
    </div>
</section>



    <!-- 底部信息栏 -->
    <footer>
        <p>宿舍地址：XX大学XX宿舍楼XX房间</p>
        <p>联系方式：电话 / 邮箱</p>
        <div class="social-links">
            <a href="#">微信</a>
            <a href="#">微博</a>
            <a href="#">Instagram</a>
        </div>
        <p>© 2023 XX宿舍. 保留所有权利.</p>
    </footer>
</body>
</html>